<template>
	<view class="forget-pwd">
		<view class="title-name">
			<image class="back-arrow" @click="back" src="https://splendid.oss-cn-beijing.aliyuncs.com/static/zhengyulan/back-arrow.png" mode="">
			</image>
			<view class="name">{{name}}</view>
		</view>
		<view class="content-wrap">
			<view class="item">

				<view class="ipt-wrap">
					<view class="name">手机号</view>
					<input placeholder="请输入手机号" v-model="params.mobile" placeholder-class="placeholder" type="text" />
					<!-- <image src="../../pages/login/images/eye.png" mode=""></image> -->
					<!-- <image src="../../pages/login/images/close-eye.png" mode=""></image> -->
				</view>
			</view>

			<view class="item">
				<view class="ipt-wrap">
					<view class="name">验证码：</view>
					<input v-model="params.code" placeholder="请输入验证码" placeholder-class="placeholder" type="text" />
					<button :style="getCodeFlag?'backgroundColor:#0874FA':''" :disabled="getCodeFlag" @click="getCode"
						class="code">{{getCodeFlag?countDown+'s'+'后重发':"获取验证码"}}</button>
				</view>
			</view>
			<view class="item">
				<view class="ipt-wrap">
					<view class="name">设置密码：</view>
					<input v-model="params.password" placeholder="请输入密码" placeholder-class="placeholder" type="text" />
				</view>

			</view>
			<view class="item">
				<view class="ipt-wrap">
					<view class="name">确认密码：</view>
					<input v-model="params.rePassword" placeholder="请再次确认密码" placeholder-class="placeholder"
						type="text" />
				</view>

			</view>
			<view class="btn-wrap">
				<button @click="save">提交</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import http from '../../request/index.js'
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref,
		computed,
		watch,
		reactive
	} from 'vue'
	let name = "忘记密码"
	let getCodeFlag = ref(false)
	let countDown = ref(60)
	let params = reactive({
		mobile: '',
		code: '',
		password: "",
		rePassword: ""
	})
	let back = () => {
		uni.navigateBack()
	}
	let save = () => {
		if (!params.mobile) {
			uni.showToast({
				title: '请输入手机号',
				icon: "none",
				mask: true
			})
			return
		}
		if (!/^1\d{10}$/.test(params.mobile)) {
			uni.showToast({
				title: '手机号格式不正确',
				icon: "none",
				mask: true
			})
			return
		}
		if (!params.code) {
			uni.showToast({
				title: '验证码不能为空',
				icon: "none",
				mask: true
			})
			return
		}
		if (params.password !== params.rePassword) {
			uni.showToast({
				title: '密码不一致',
				icon: "none",
				mask: true
			})
			return
		}
		http({
			url: '/user/forgetpwd',
			data: {
				code: params.code,
				mobile: params.mobile,
				password: params.password
			}
		}).then((res) => {
			if (res.code == 0) {
				uni.showToast({
					title: '修改成功,请重新登录',
					icon: "none",
					mask: true,
					duration: 2000
				})
				for (let key in params) {
					params[key] = ''
				}
				let timer = setTimeout(() => {
					uni.navigateTo({
						url: "/pages/login/index"
					})
					clearTimeout(timer)
				}, 2000)
			}

		})
	}
	let getCode = () => {
		if (!params.mobile) {
			uni.showToast({
				title: '请输入手机号',
				icon: "none",
				mask: true
			})
			return
		}
		if (!/^1\d{10}$/.test(params.mobile)) {
			uni.showToast({
				title: '手机号格式不正确',
				icon: "none",
				mask: true
			})
			return
		}
		getCodeFlag.value = true
		let timer;
		clearInterval(timer)
		timer = setInterval(() => {
			countDown.value--
			if (countDown.value == 0) {
				clearInterval(timer)
				timer = null
				getCodeFlag.value = false
				countDown.value = 60
			}
		}, 1000)
		http({
			url: "/sms/sendsms",
			data: {
				type: 2,
				mobile: params.mobile
			}
		}).then((res) => {
			if (res.code == 0) {
				// uni.showToast({
				// 	title: '获取成功',
				// 	icon: "none",
				// 	mask: true

				// })
			}

		})

	}
</script>

<style lang="scss" scoped>
	.forget-pwd {
		width: 100vw;
		height: 100vh;
		overflow: hidden;

		.placeholder {

			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 28upx;
			color: #999999;

		}

		.content-wrap {
			height: calc(100vh - 142upx);
			width: 100vw;
			padding: 55upx 50upx 0 45upx;

			.btn-wrap {
				padding: 130upx 26upx 0 40upx;


				button {
					width: 100%;
					height: 79upx;
					background: #0874FA;
					border-radius: 39upx;
					line-height: 79upx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					font-size: 33upx;
					color: #FFFFFF;
					padding: 0 !important;
					margin: 0 !important;

				}
			}

			.item:nth-of-type(1) {
				margin-top: 0 !important;
			}

			.item {
				margin-top: 30upx;

				.ipt-wrap {
					width: 100%;

					display: flex;
					align-items: center;
					border-bottom: 2upx solid #F4F4F4;
					padding-left: 9upx;
					padding-right: 18upx;
					align-items: center;
					padding-bottom: 24upx;

					.name {
						width: 185upx;

						font-family: Source Han Sans CN;
						font-weight: 500;
						font-size: 30upx;
						color: #333333;
						flex-shrink: 0;
					}

					.code {
						padding: 0;
						margin: 0;
						width: 185upx;
						height: 55upx;
						background: #0874FA;
						border-radius: 14upx;
						line-height: 55upx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						font-size: 26upx;
						color: #FFFFFF;
						flex-shrink: 0;
					}

					input {
						flex-grow: 1;
						padding-right: 20upx;
					}


				}
			}



		}

		.title-name {
			width: 750upx;
			height: 142upx;
			/* #ifdef MP-WEIXIN */
			height: 160upx;
			/* #endif */
			background: #0874FA;
			position: relative;
			display: flex;
			justify-content: center;

			.name {
				bottom: 28upx;
				position: absolute;
				font-weight: 500;
				font-size: 35upx;
				color: #FFFFFF;
				/* #ifdef MP-WEIXIN */
				bottom: 0upx;
				top: 92upx;
				/* #endif */
			}

			.back-arrow {
				width: 21upx;
				height: 38upx;
				position: absolute;
				left: 40upx;
				bottom: 30upx;
				/* #ifdef MP-WEIXIN */
				bottom: 0upx;
				top: 102upx;
				/* #endif */
			}


		}
	}
</style>